<!DOCTYPE html>
<!-- 孙中超 2019-7-28 电费统计主页面 用的layui js -->
<html class="x-admin-sm">
	<head>
		<meta charset="UTF-8">
		<title>电费统计</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="command/echarts.js"></script>
		<script src="command/echarts.min.js"></script>
	</head>
	<body>
		<div class="layui-fluid">
			<div class="x-nav">
				<span class="layui-breadcrumb">
					<a href="">首页</a>
					<a href="">财务管理</a>
					<a>
						<cite>电费统计</cite></a>
				</span>
				<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
				 title="刷新">
					<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
			</div>
			<div class="layui-fluid">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-body ">
								<form class="layui-form layui-col-space5">
									<div class="layui-inline layui-show-xs-block">
										<input class="layui-input" autocomplete="off" placeholder="时间" name="end" id="end">
									</div>
									<div class="layui-inline layui-show-xs-block">
										<input type="text" name="username" placeholder="电表编号" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-inline layui-show-xs-block">
										<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
									</div>
								</form>
							</div>
							<div class="layui-card-body ">
								<table class="layui-table layui-form">
									<thead>
										<tr>
											<th>
												<input type="checkbox" name="" lay-skin="primary">
											</th>
											<th>总表数字</th>
											<th>总金额</th>
											<th>编辑</th>
									</thead>
									<tbody>
										<tr>
											<td>
												<input type="checkbox" name="" lay-skin="primary">
											</td>
											<td>10000</td>
											<td>250000</td>
											<td class="td-manage">
												<a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
													<i class="layui-icon">&#xe640;</i>
												</a>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="layui-card-body ">
								<div class="page">
									<div>
										<a class="prev" href="">&lt;&lt;</a>
										<a class="num" href="">1</a>
										<span class="current">2</span>
										<a class="num" href="">3</a>
										<a class="num" href="">489</a>
										<a class="next" href="">&gt;&gt;</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space15">

				<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
				<div id="main" style="width: 400px;height:400px;"></div>
				<script type="text/javascript">
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));

					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '电表统计'
						},
						tooltip: {},
						legend: {
							data: ['表数']
						},
						xAxis: {
							data: ["1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008"]
						},
						yAxis: {},
						series: [{
							name: '表数',
							type: 'bar',
							data: [50, 100, 150, 50, 150, 100, 150, 100]
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				</script>
				<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
				<div id="zhexian" style="width: 600px;height:400px;"></div>
				<script type="text/javascript">
					var myChart = echarts.init(document.getElementById('zhexian'));
					var option = {
						title: {
							text: '电费统计',
							subtext: '纯属虚构'
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['费用', '总表数']
						},
						toolbox: {
							show: true,
							feature: {
								dataZoom: {
									yAxisIndex: 'none'
								},
								dataView: {
									readOnly: false
								},
								magicType: {
									type: ['line', 'bar']
								},
								restore: {},
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: ['10001', '10002', '10003', '10004', '10005', '10006', '10007','10008']
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								formatter: '{value}'
							}
						},
						series: [{
								name: '费用',
								type: 'line',
								data: [700, 650, 600, 640, 645, 630, 620,610],
								markPoint: {
									data: [{
											type: 'max',
											name: '最大值'
										},
										{
											type: 'min',
											name: '最小值'
										}
									]
								},
								markLine: {
									data: [{
										type: 'average',
										name: '平均值'
									}]
								}
							},
							{
								name: '总表数',
								type: 'line',
								data: [128.3, 110.6, 99.9, 85.5, 95.4, 101.5, 79.9,90.8],
								markPoint: {
									data: [{
										name: '周最低',
										value: -2,
										xAxis: 1,
										yAxis: -1.5
									}]
								},
								markLine: {
									data: [{
											type: 'average',
											name: '平均值'
										},
										[{
											symbol: 'none',
											x: '90%',
											yAxis: 'max'
										}, {
											symbol: 'circle',
											label: {
												normal: {
													position: 'start',
													formatter: '最大值'
												}
											},
											type: 'max',
											name: '最高点'
										}]
									]
								}
							}
						]
					};
					myChart.setOption(option);
				</script>
				<script>
					layui.use(['laydate', 'form'], function() {
						var laydate = layui.laydate;
						var form = layui.form;

						//执行一个laydate实例
						laydate.render({
							elem: '#start' //指定元素
						});

						//执行一个laydate实例
						laydate.render({
							elem: '#end' //指定元素
						});
					});

					function member_del(obj, id) {
						layer.confirm('确认要删除吗？', function(index) {
							//发异步删除数据
							$(obj).parents("tr").remove();
							layer.msg('已删除!', {
								icon: 1,
								time: 1000
							});
						});
					}



					function delAll(argument) {

						var data = tableCheck.getData();

						layer.confirm('确认要删除吗？' + data, function(index) {
							//捉到所有被选中的，发异步进行删除
							layer.msg('删除成功', {
								icon: 1
							});
							$(".layui-form-checked").not('.header').parents('tr').remove();
						});
					}
				</script>
	</body>
</html>
